<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true">
      <el-form-item label="运营现状">
        <el-select v-model="businessstatus" placeholder="请选择机构现状">
          <el-option
            v-for="item in businessoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构地址">
        <el-select v-model="addressdetail" placeholder="请选择省市区" clearable>
          <el-option
            v-for="item in addressdetailinessoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <!--  @keyup.enter.native="handleQuery" -->
        <el-input placeholder="请输入负责人姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="agencyList"
      row-key="id"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column type="index" width="80"> </el-table-column>
      <el-table-column
        prop="agencyname"
        label="机构名称"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="area"
        label="省/市/区"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="详细地址地址"
        align="center"
        width="300"
      ></el-table-column>
      <el-table-column
        prop="principal"
        label="责任人"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="contact"
        label="联系方式"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="sparephone"
        label="备用电话"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="120">
        <!-- slot-scope="scope" -->
        <template>
          <el-tag type="success">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="addtime"
        label="追加时间"
        align="center"
        width="160"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"
            >修改</el-button
          >
          <el-button size="mini" type="text" icon="el-icon-plus"
            >新增</el-button
          >
          <el-button
            v-if="scope.row.parentId != 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" />
    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级机构" prop="id">
              <treeselect
                v-model="form.id"
                :options="agencyOptions"
                placeholder="选择上级机构"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构名称" prop="agencyname">
              <el-input
                v-model="form.agencyname"
                placeholder="请输入机构名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="principal">
              <el-input
                v-model="form.principal"
                placeholder="请输入负责人名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="leader">
              <el-input
                v-model="form.leader"
                placeholder="请输入联系方式"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备用电话" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请输入备用电话"
                maxlength="11"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="机构概要" prop="email">
              <el-input
                type="textarea"
                :rows="2"
                v-model="form.email"
                placeholder="请输入邮箱"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      loading: false,
      isExpandAll: true,
      title: "",
      open: false,
      total: 100,
      agencyOptions: [],
      businessstatus: undefined,
      businessoptions: [],
      addressdetail: undefined,
      addressdetailinessoptions: [],
      // 机构列表
      agencyList: [
        {
          id: 1,
          agencyname: "博实联创",
          area: "上海市普陀区",
          address: "金沙江路 1518 弄",
          principal: "中根正喜",
          contact: "13800000000",
          sparephone: "13800000000",
          status: true,
          addtime: "2016-05-01",
          children: [
            {
              id: 11,
              agencyname: "海华慧",
              area: "東京都 府中市",
              address: "东北旺西路8号中关村软件园2号楼",
              principal: "小林武尊",
              contact: "13800000000",
              sparephone: "13800000000",
              status: true,
              addtime: "2016-05-01",
            },
          ],
        },
        {
          id: 2,
          agencyname: "测试机构",
          area: "北京北京西二旗",
          address: "园区1-333--33-3-3-3",
          principal: "平川博龍",
          contact: "13800000000",
          sparephone: "13800000000",
          status: true,
          addtime: "2016-05-01",
          children: [
            {
              id: 21,
              agencyname: "思利普科技",
              area: "广东省广东省江门市",
              address: "蓬江区发展大道4号",
              principal: "江国敏",
              contact: "13800000000",
              sparephone: "13800000000",
              status: true,
              addtime: "2016-05-01",
            },
          ],
        },
      ],
      // 部门树选项
      deptOptions: [],
      form: {},
      rules: {
        parentId: [
          { required: true, message: "上级部门不能为空", trigger: "blur" },
        ],
        deptName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /** 新增按钮操作 */
    handleAdd(row) {
      //this.reset();
      if (row != undefined) {
        this.form.id = row.id;
      }
      this.open = true;
      this.title = "添加部门";
      // listDept().then(response => {
      //   this.deptOptions = this.handleTree(response.data, "deptId");
      // });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(function () {})
        .then(() => {
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
